import React, { useRef, useState } from 'react';
import { ProTable, ActionType } from '@ant-design/pro-components';
import { Button, Modal, Descriptions, Tag } from 'antd';
import { FundOutlined, SearchOutlined } from '@ant-design/icons';
import * as transactionController from '@/services/backend/transactionController';

const TransactionPage: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [detailModal, setDetailModal] = useState<{visible: boolean, record?: any}>({visible: false});

  return (
    <>
      <ProTable
        actionRef={actionRef}
        rowKey="tradeId"
        columns={[
          { title: '流水号', dataIndex: 'tradeId', search: false },
          { title: '银行卡号', dataIndex: 'cardId' },
          { title: '类型', dataIndex: 'tradeType', valueType: 'select', valueEnum: {
            '存入': { text: '存入', status: 'Success' },
            '支取': { text: '支取', status: 'Error' },
            '转账': { text: '转账', status: 'Processing' },
          }, render: (_, r) => <Tag color={r.tradeType==='存入'?'green':r.tradeType==='支取'?'red':'blue'}>{r.tradeType}</Tag> },
          { title: '金额', dataIndex: 'tradeMoney', render: (v, r) => `¥${v}`, search: false },
          { title: '交易时间', dataIndex: 'tradeDate', valueType: 'dateTime', search: false },
          { title: '金额区间', dataIndex: 'amountRange', valueType: 'digitRange', hideInTable: true },
          { title: '时间区间', dataIndex: 'dateRange', valueType: 'dateRange', hideInTable: true },
          { title: '操作', valueType: 'option', render: (_, record) => (
            <Button type="link" icon={<SearchOutlined />} onClick={() => setDetailModal({visible:true,record})}>详情</Button>
          )},
        ]}
        request={async (params) => {
          const res = await transactionController.getCustomerTransactionList({
            page: params.current,
            size: params.pageSize,
            cardId: params.cardId,
            tradeType: params.tradeType,
            minAmount: params.amountRange && params.amountRange[0],
            maxAmount: params.amountRange && params.amountRange[1],
            startDate: params.dateRange && params.dateRange[0],
            endDate: params.dateRange && params.dateRange[1],
            remark: params.remark,
          });
          return {
            data: res.data?.records || res.data || [],
            total: res.data?.total || 0,
            success: res.code === 1 || res.code === 0,
          };
        }}
        search={{ labelWidth: 80 }}
        pagination={{ showQuickJumper: true, defaultPageSize: 10 }}
        toolBarRender={() => [
          <Button key="refresh" onClick={() => actionRef.current?.reload()} icon={<FundOutlined />}>刷新</Button>
        ]}
      />
      <Modal
        title="交易详情"
        open={detailModal.visible}
        onCancel={() => setDetailModal({visible:false})}
        footer={null}
      >
        {detailModal.record && (
          <Descriptions column={1} bordered size="small">
            <Descriptions.Item label="流水号">{detailModal.record.tradeId}</Descriptions.Item>
            <Descriptions.Item label="银行卡号">{detailModal.record.cardId}</Descriptions.Item>
            <Descriptions.Item label="类型">{detailModal.record.tradeType}</Descriptions.Item>
            <Descriptions.Item label="金额">¥{detailModal.record.tradeMoney}</Descriptions.Item>
            <Descriptions.Item label="时间">{detailModal.record.tradeDate}</Descriptions.Item>
            <Descriptions.Item label="备注">{detailModal.record.remark || '-'}</Descriptions.Item>
          </Descriptions>
        )}
      </Modal>
    </>
  );
};

export default TransactionPage; 